<template>
	<view class="content">
		<view class="inv-h-w">
		        <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0;one($event)" data-index="0"> 全部订单</view>
		        <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1;two($event)" data-index="1">待付款</view>
				 <view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2;three($event)" data-index="2" >待收货</view>
				 
		</view>
		
		   <view v-show="Inv == 0" class="ok">
			<view v-for="item in alreadyLists" :key="item.id" class="one" v-show="buy">
							 <image :src="$host+item.src" mode="widthFix"></image> 
							  <view class="two">{{item.title}}</view> <view class="other"><view>￥{{item.money*item.count}}</view>  <view>×{{item.count}}</view>  </view>
			</view>
		  
		  <view class="box" v-show="!buy">
		  	<image :src="$host+'apc.jpg'" mode="widthFix"></image>
		  	<view class="title">
		  		<view class="one" id="ii">30天内没有订单</view>
		  			<view class="two">可以去看看哪些可以买的</view>
		  	<view class="ii"> <view class="three" @click="gohome">返回首页</view> <view class="four">更多历史订单</view>   </view>		
		  		
		  	</view>
		  </view>
			   
		 </view>
		 
		 <view v-show="Inv == 1" class="ok">
			 <view v-for="item in alreadyList" :key="item.id" class="one" v-show="!buy">
				 <image :src="$host+item.src" mode="widthFix"></image> 
				  <view class="two">{{item.title}}</view> <view class="other"><view>￥{{item.money*item.count}}</view>  <view>×{{item.count}}</view>  </view>
			 </view>
			 <view class="footer" v-show="!buy">
			 	
			 	<view class="total">
			 		<text>合计</text><text class="getA">￥{{totalmoney}}</text><text class="getB">(共{{goodnumber}}件)</text>
			 	</view>
			 	<view class="buygood">
			 		<text class="getC" @click="tobuy">购买</text>
			 	</view>
			 	
			 </view>
			 <view class="box" v-show="buy">
			 	<image :src="$host+'apc.jpg'" mode="widthFix"></image>
			 	<view class="title">
			 		<view class="one" id="ii">30天内没有订单</view>
			 			<view class="two">可以去看看哪些可以买的</view>
			 	<view class="ii"> <view class="three" @click="gohome">返回首页</view> <view class="four">更多历史订单</view>   </view>		
			 		
			 	</view>
			 </view>
		 			   
		 </view>
		 <view v-show="Inv == 2" class="ok">
		 		<view v-for="item in alreadyListss" :key="item.id" class="one" v-show="buy">
		 						 <image :src="$host+item.src" mode="widthFix"></image> 
		 			 <view class="two">{{item.title}}</view> <view :class="[item.buy==0?'getgood':'nogood']"> <text> 已</text><text class="good" :data-index=item.id @click="getgo">收货</text></view>
		 		</view>
				
				<view class="box" v-show="!buy">
					<image :src="$host+'apc.jpg'" mode="widthFix"></image>
					<view class="title">
						<view class="one" id="ii">30天内没有订单</view>
							<view class="two">可以去看看哪些可以买的</view>
					<view class="ii"> <view class="three" @click="gohome">返回首页</view> <view class="four">更多历史订单</view>   </view>		
						
					</view>
				</view>
				
		 	
		 </view>
	</view>
</template>

<script>
	export default{
		data() {
		        return {
		                Inv:0,
						$host:this.$host,
						alreadyList:[],
						totalmoney:0,
						goodnumber:0,
						id:[],
						alreadyLists:[],
						buy:false,
						alreadyListss:[],
						ids:0
						
					
		        }
		},
		methods: {
			getgo(e){
				this.$request("/getgoodsle","post",{id:e.currentTarget.dataset.index}).then(res=>{
					                     
				})
				this.$request("/getbuystate","post",{}).then(res=>{
							  if(res.data.length>0){
								  this.buy=true
								    this.alreadyListss=res.data
							  }else{
								    this.buy=false
							  }
								  
								  
							})
			},
			gohome(){
				uni.redirectTo({
					url:"/pages/index/index"
				})
			},
			one(e){
			
				this.$request("/getbuydatass","post",{}).then(res=>{
							  if(res.data.length>0){
								  this.buy=true
								    this.alreadyLists=res.data
							  }else{
								    this.buy=false
							  }
								  
								  
							})
				
			},
			two(e){
				
			
					this.$request("/getGoodsListdata","post",{}).then(res=>{
						              
								
									  if(res.data.length>0){
										  
														  this.alreadyList=res.data
														   	let total=0
														  	let number=0
														   for(let i=0;i<this.alreadyList.length;i++){
														  	  this.id.push(this.alreadyList[i].id)
														  total+=(this.alreadyList[i].count*this.alreadyList[i].money)
														    number+=parseInt(this.alreadyList[i].count )   
														   }
														  this.totalmoney=total
														  this.goodnumber=number
														 this.buy= false
														 console.log("hh")
													  }else{
														 this.buy= true
														  
													  }
										 
									 
					})
			},
			three(e){
			this.$request("/getbuystate","post",{}).then(res=>{
						  if(res.data.length>0){
							  this.buy=true
							    this.alreadyListss=res.data
						  }else{
							    this.buy=false
						  }
							  
							  
						})
			},
		        changeTab(Inv){
		                that.navIdx = Inv;
						console.log("换行")
						
		                 
		        },
				tobuy(){
						
					for(let i=0;i<this.id.length;i++){
						this.$request("/tobuy","post",{id:this.id[i]}).then(res=>{
												
						}) 
					}
					
						this.buy=true
				}
			
		},
		  onLoad(option) {
		  	   this.Inv=option.id
		  },
		 onShow() {
	      if(this.Inv==0){
			  this.one()
		  }else if(this.Inv==1){
			  this.two()
		  }else if(this.Inv==2){
			   this.three()
		  }
			  
			  
			  
		 }
	}
</script>

<style>
	.getgood{
		 color: #fe9a69;
		 margin-top: 4rpx;
		 display: flex;
		 flex-direction: row;
		 display: flex;
		
		 font-size: 30rpx;
	
		
	}
		
	.nogood{
		color: #f2f2f2;
		margin-top: 4rpx;
		display: flex;
		flex-direction: row;
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
	}
	.nogood>.good{
		color: black;
	}
	#ii{
	background-color: white;
	}
	.ii{
		display: flex;
		margin-top: 30rpx;
	}
	.title{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box{
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 margin-top: 110px;
	     
	}
	.box image{
		width: 120px;
	}
	.one{
		font-size: 35rpx;
		margin-top: 18px;
	}
	.two{
		font-size: 28rpx;
		color: black;
		margin-top: 10rpx;
		text-align: center;
	}
	.three{
		border-radius: 20px;
		width: 158rpx;
		height: 61rpx;
		border: 1px solid #C9C9C9;
		color: #C9C9C9;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		
	}
	.four{
		
		border-radius: 30px;
		width: 254rpx;
		height: 61rpx;
		border: 1px solid #fe9a69;
		color: #fe9a69;
		margin-left: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ok{
		position: relative;
		top: -34rpx;
	}
	.buygood{
		position: relative;
		top: 56rpx;
		height: 80px;
		
	}
	.getC{
		border-radius:22px 0px 0px 22px ;
		background-color: #fe9a69;
		font-size: 36rpx;
		color: white;
		padding: 16rpx 65rpx;
	}
	.getB{
		 font-size: 23rpx;
		 position: relative;
		 top: 6rpx;
		 margin-left: 8rpx;
	}
	.getA{
		color: #fe9a69;
	}
	.footer{
		width: 100%;
		height: 40px;
		background-color: white;
		position: fixed;
		bottom: -1px;
		left: 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.total{
		display: flex;
		justify-content: space-around;
		
	}
	.two{
		width: 506rpx;
		padding: 10rpx 10rpx;
		font-size: 32rpx;
		font-weight: 400;
	}
	.other{
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
	
		
	}
	.one{
		display: flex;
		margin-top: 40rpx;
		background-color:#f2f2f2;
		align-items: center;
		
	}
	.one image{
		width: 50px;
			padding: 10rpx 10rpx;
	}
	
	
	
	.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
	.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
	.inv-h-se{color: black;border-bottom: 4upx solid #fe9a69;}
	 page{background-color: white;}
	 
	 
	
</style>